<template>
    <!-- width="1920" height="1080" 可写可不写额 -->
    <v-scale-screen :boxStyle="{ background: '#0f1f23' }" width="8640" height="2460">
        <div class="led-box">
            <div class="led-left">
                <div class="led-left-left">

                    <div class="left-top">
                        <dv-border-box-4 :color="['#69cacd', '#f1ab29']">
                            <div class="select-box">
                                <select>
                                    <option value="value1">巴山大峡谷</option>
                                    <option value="value2">达州市</option>
                                    <option value="value3">通川区</option>
                                </select>
                                <select>
                                    <option value="value1">巴山大峡谷</option>
                                    <option value="value2">达州市</option>
                                    <option value="value3">通川区</option>
                                </select>
                            </div>
                            <div class="led-left-left-row1">
                                <div class="icon_bg1">5488578人</div>
                                <div class="icon_bg2">6210000人</div>
                                <div class="icon_bg3">3452221人</div>
                            </div>
                        </dv-border-box-4>
                    </div>

                    <div class="led-left-left-row2">
                        <dv-border-box-4 :color="['#69cacd', '#f1ab29']">
                            <div class="title">外来人口来源地（top10）</div>
                            <div id="config" style="width:100%;height:700px;"></div>
                        </dv-border-box-4>
                    </div>
                    <div class="led-left-left-row3">
                        <dv-border-box-4 :color="['#69cacd', '#f1ab29']">
                            <div class="title">人口漫出分布</div>
                            <div id="container" style="width:100%;height:400px;"></div>
                        </dv-border-box-4>
                    </div>
                </div>
                <div class="led-left-right">
                    <div class="led-left-right-left">
                        <div class="led-left-right-left-row1 day">1236722人</div>
                        <div class="led-left-right-left-row1 mat-50">
                            <dv-border-box-1 :color="['#69cacd', '#f1ab29']">
                                <div class="title">游客性别分布</div>
                                <div id="container1" style="width:100%;height:350px;"></div>
                            </dv-border-box-1>
                        </div>
                        <div class="led-left-right-left-row1 mat-50">
                            <dv-border-box-1 :color="['#69cacd', '#f1ab29']">
                                <div class="title">游客出行方式分布</div>
                                <div id="container2" style="width:100%;height:350px;"></div>
                            </dv-border-box-1>
                        </div>

                        <div class="led-left-right-left-row1 mat-50">
                            <dv-border-box-1 :color="['#69cacd', '#f1ab29']">
                                <div class="title">游客年龄分布</div>
                                <div id="container3" style="width:100%;height:350px;"></div>
                            </dv-border-box-1>
                        </div>
                    </div>
                    <div class="led-left-right-right">
                        <div class="led-left-right-right-row1">
                            <dv-border-box-1 :color="['#69cacd', '#f1ab29']">
                                <div class="title">省外游客消费金额TOP10</div>
                                <dv-scroll-board :config="config2" style="width:100%;height:830px" />
                            </dv-border-box-1>
                        </div>
                        <div class="led-left-right-left-row1 mat-50">
                            <dv-border-box-1 :color="['#69cacd', '#f1ab29']">
                                <div class="title">游客资产等级分布</div>
                                <div id="container4" style="width:100%;height:350px;"></div>
                            </dv-border-box-1>
                        </div>
                        <div class="led-left-right-left-row1 mat-50">
                            <dv-border-box-1 :color="['#69cacd', '#f1ab29']">
                                <div class="title">行政区域消费排名</div>
                                <div id="container5" style="width:100%;height:350px;"></div>
                            </dv-border-box-1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="led-center">
                <div class="led-center">
                    <img class="hot-title" src="../assets/image/hot-title.png" alt="">
                </div>
                <div class="hot-center">
                    <div>
                        <div class="icon_bg1 icon">5488578人</div>
                        <div class="icon_bg2 icon">6210000人</div>
                        <div class="icon_bg3 icon">3452221人</div>
                    </div>
                    <div>
                        <img class="hot" src="../assets/image/hot.png" alt="">
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="right-top">
                    <div class="top-row">
                        <dv-border-box-10 :color="['#69cacd', '#f1ab29']">
                            <div class="title2">景区实时游客趋势</div>
                            <div id="container6" style="width:100%;height:280px"></div>
                        </dv-border-box-10>
                    </div>
                    <div class="top-row">
                        <dv-border-box-10 :color="['#69cacd', '#f1ab29']">
                            <div class="title2">游客来源省份（TOP10）</div>
                            <div id="container7" style="width:100%;height:280px"></div>
                        </dv-border-box-10>
                    </div>
                    <div class="top-row">
                        <div class="day-box">
                            <div class="icon5-bg">103425万</div>
                            <!-- <dv-border-box-10 :color="['#69cacd', '#f1ab29']">
                                <div class="title2">景区游客停留时长</div>
                                <div id="container9" style="width:780px;height:280px"></div>
                            </dv-border-box-10> -->
                        </div>
                    </div>
                    <div class="top-row">
                        <dv-border-box-10 :color="['#69cacd', '#f1ab29']">
                            <div class="title2">游客来源城市（TOP10）</div>
                            <div id="container8" style="width:100%;height:280px"></div>
                        </dv-border-box-10>
                    </div>
                </div>
                <div class="right-bottom">
                    <div class="right-bottom-left">
                        <table>
                            <thead>
                                <tr>
                                    <td>区域风险级别</td>
                                    <td>发型类型</td>
                                    <td>人员目标</td>
                                    <td>编辑</td>
                                    <td>操作</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>风险区二级预警</td>
                                    <td>手动</td>
                                    <td>风险区域人员</td>
                                    <td>修改 删除</td>
                                    <td>开始发送</td>
                                </tr>
                                <tr>
                                    <td>风险区二级预警</td>
                                    <td>手动</td>
                                    <td>风险区域人员</td>
                                    <td>修改 删除</td>
                                    <td>开始发送</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="mat-50">
                            <thead>
                                <tr>
                                    <td>序号</td>
                                    <td>发送时间</td>
                                    <td>内容文案</td>
                                    <td style="width: 200px;">积累发送数量</td>
                                    <td style="width: 200px;">第一次出发通知时人员总量</td>
                                    <td style="width: 200px;">当前滞留人员总量</td>
                                    <td>状态</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>2023-03-10 16:35</td>
                                    <td>风险区域人员</td>
                                    <td>9999</td>
                                    <td>8888</td>
                                    <td>666</td>
                                    <td>已结束</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>2023-03-10 16:35</td>
                                    <td>风险区域人员</td>
                                    <td>9999</td>
                                    <td>8888</td>
                                    <td>666</td>
                                    <td>已结束</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="right-bottom-right">
                        <div class="row-flex icon-bg12">1236722人</div>
                        <div class="row-flex">
                            <dv-border-box-10 :color="['#69cacd', '#f1ab29']">
                                <div class="title2">各区县接待游客</div>
                                <dv-scroll-board :config="rollTable2" style="width:100%;height:300px" />
                            </dv-border-box-10>
                        </div>
                        <div class="row-flex icon-bg6">3天</div>
                        <div class="row-flex">
                            <dv-border-box-10 :color="['#69cacd', '#f1ab29']">
                                <div class="title2">游客来源城市（TOP10）</div>
                                <div id="container10" style="width:100%;height:300px;"></div>
                            </dv-border-box-10>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </v-scale-screen>
</template>
 
<script>
import Charts from '@jiaminghi/charts'
import json from '@/utils/option.js'
import * as echarts from "echarts";

export default {
    data() {
        return {
            config2: json.config2,
            rollTable2: json.rollTable2
        };
    },
    mounted() {
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.$nextTick(() => {

                let config = echarts.init(document.getElementById("config"));
                config.setOption(json.config);

                let container = echarts.init(document.getElementById("container"));
                container.setOption(json.option);

                let container1 = echarts.init(document.getElementById("container1"));
                container1.setOption(json.pieOption);

                let container2 = echarts.init(document.getElementById("container2"));
                container2.setOption(json.pieOption2);

                let container3 = echarts.init(document.getElementById("container3"));
                container3.setOption(json.pieOption3);

                let container4 = echarts.init(document.getElementById("container4"));
                container4.setOption(json.pieOption4);

                let container5 = echarts.init(document.getElementById("container5"));
                container5.setOption(json.pieOption5);

                let foldLine = echarts.init(document.getElementById("container6"));
                foldLine.setOption(json.option1);

                let container7 = echarts.init(document.getElementById("container7"));
                container7.setOption(json.column2);

                let container8 = echarts.init(document.getElementById("container8"));
                container8.setOption(json.column);

                // let container9 = echarts.init(document.getElementById("container9"));
                // container9.setOption(json.column);

                let container10 = echarts.init(document.getElementById("container10"));
                container10.setOption(json.option10);

            })
        }
    },
};
</script>

<style lang="less" scoped>
.mat-50 {
    margin-top: 30px;
}

.title {
    font-size: 40px;
    color: #e2e3a8;
    font-weight: bold;
    margin-bottom: 30px;
}

.icon-bg6 {
    background: url('../assets/image/icon11.png') no-repeat;
    background-size: 100% 100%;
    line-height: 300px;
    font-size: 60px;
    color: wheat;
    font-weight: 900;
    text-align: center;
}

.icon-bg12 {
    background: url('../assets/image/icon12.png') no-repeat;
    background-size: 100% 100%;
    line-height: 300px;
    font-size: 60px;
    color: wheat;
    font-weight: 900;
    text-align: center;
}

.title2 {
    font-size: 40px;
    color: #e2e3a8;
    font-weight: bold;
}

/deep/.border-box-content {
    padding: 30px;
    box-sizing: border-box;
}

table {
    width: 100%;
    font-size: 32px;

    thead {
        width: 100%;

        text-align: center;
        color: #fff;

        tr,
        td {
            height: 70px;
            line-height: 70px;
            box-sizing: border-box;
            text-align: center;
            color: #1cd08e;
            background: linear-gradient(#0a191a, #427608) !important;
            border-left: 1px solid #4f99ba;
            border-bottom: 1px solid #4f99ba;
        }
    }

    tbody {

        tr,
        td {
            height: 70px;
            line-height: 70px;
            box-sizing: border-box;
            text-align: center;
            color: #1cd08e;
            background: #0a191a;
            border-left: 1px solid #4f99ba;
            border-bottom: 1px solid #4f99ba;
        }
    }

}

/deep/.row-item {
    color: #1cd08e;
    font-size: 38px !important;
}

/deep/.row-item .index {
    background: transparent !important;
}

/deep/.dv-border-box-4 .dv-border-svg-container polyline {
    stroke-width: 10;
}

.led-box::before {
    content: '';
    position: absolute;
    font-family: 'FZCYJ';
    top: 0;
    left: 0;
    background: url('../assets/image/bg.jpg') no-repeat;
    background-size: 8640px 2160px;
    height: 2460px;
    width: 100%;
    text-align: center;
    z-index: -1;
}

.led-box {
    width: 8640px;
    display: flex;
    padding-top: 240px;


    .led-left {
        width: 2880px;
        display: flex;


        .led-left-left {
            width: 1440px;
            background: url('../assets/image/left-left.png') no-repeat;
            background-size: 100% 100%;
            height: 2200px;
            padding: 170px 70px 100px 70px;
            box-sizing: border-box;

            .left-top {
                height: 500px;

                .select-box {
                    display: flex;
                    flex-direction: row-reverse;
                }
            }

            .title {
                font-size: 40px;
                color: #e2e3a8;
                font-weight: bold;
                margin-bottom: 30px;
            }

            .led-left-left-row1 {
                display: flex;
                justify-content: center;
                align-items: center;

                div {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    height: 325px;
                    line-height: 250px;
                    font-size: 60px;
                    color: wheat;
                    font-weight: 900;
                }


                .icon_bg1 {
                    background: url('../assets/image/icon1.png') no-repeat;
                    background-size: 100% 100%;
                }

                .icon_bg2 {
                    background: url('../assets/image/icon2.png') no-repeat;
                    background-size: 100% 100%;
                    height: 325px;
                }

                .icon_bg3 {
                    background: url('../assets/image/icon3.png') no-repeat;
                    background-size: 100% 100%;
                    height: 325px;
                }

                .icon {
                    display: block;
                    width: 405px;
                    height: 383px;
                }
            }

            .led-left-left-row2 {
                width: 100%;
                height: 820px;
                margin-top: 50px;

            }

            .led-left-left-row3 {
                width: 100%;
                height: 580px;
                margin-top: 50px;
            }
        }

        .led-left-right {
            width: 1440px;
            background: url('../assets/image/left-left.png') no-repeat;
            background-size: 100% 100%;
            height: 2200px;
            padding: 140px 70px;
            box-sizing: border-box;
            display: flex;

            .led-left-right-left {
                flex: 1;

                .day {
                    background: url('../assets/image/day.png') no-repeat;
                    background-size: 100% 100%;
                    height: 450px;
                    color: wheat;
                    font-size: 60px;
                    font-weight: bold;
                    line-height: 350px;
                    text-align: center;
                }
            }

            .led-left-right-right {
                flex: 1;

                .led-left-right-right-row1 {
                    .roll-table-header {
                        color: #000;
                        font-weight: 800;
                        font-size: 16px;
                    }
                }
            }
        }
    }

    .led-center {
        width: 2480px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .hot-title {
            display: block;
            width: 1225px;
            height: 156px;
        }

        .hot {
            display: block;
            width: 1418px;
            height: 1324px;
        }

        .hot-center {
            display: flex;
            align-items: center;

            .icon {
                width: 500px;
                height: 325px;
                font-size: 60px;
                color: wheat;
                font-weight: 900;
                display: flex;
                align-items: center;
                justify-content: center;
                padding-bottom: 50px;
            }

            .icon_bg1 {
                background: url('../assets/image/icon1.png') no-repeat;
                background-size: 100% 100%;
            }

            .icon_bg2 {
                background: url('../assets/image/icon2.png') no-repeat;
                background-size: 100% 100%;
                height: 325px;
            }

            .icon_bg3 {
                background: url('../assets/image/icon3.png') no-repeat;
                background-size: 100% 100%;
                height: 325px;
            }

        }
    }

    .right-top {
        width: 3260px;
        background: url('../assets/image/right-top.png') no-repeat;
        background-size: 100% 100%;
        height: 1100px;
        padding: 150px 80px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        gap: 30px;

        .top-row {
            width: 1520px;
        }

        .day-box {
            display: flex;

            .icon5-bg {
                width: 630px;
                margin-right: 50px;
                background: url('../assets/image/day.png') no-repeat;
                background-size: 100% 100%;
                height: 375px;
                flex-shrink: 0;
                line-height: 250px;
                text-align: center;
                font-size: 60px;
                color: wheat;
                font-weight: 900;
            }
        }
    }

    .right-bottom {
        display: flex;

        .right-bottom-left {
            flex: 1;
            background: url('../assets/image/right-bottom-left.png') no-repeat;
            background-size: 100% 100%;
            height: 1100px;
            padding: 150px 90px;
            box-sizing: border-box;
        }

        .right-bottom-right {
            flex: 1;
            background: url('../assets/image/right-bottom-right.png') no-repeat;
            background-size: 100% 100%;
            height: 1100px;
            padding: 150px 90px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;

            .row-flex {
                width: 700px;
                height: 400px;

                img {
                    width: 700px;
                    height: 400px;
                }
            }
        }
    }
}
</style>